<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		.tab-pane .table {
			margin-top: 30px;
		}
		.img-group {
			display: inline-block;
			width: 30px;
			height: 30px;
			margin-right: 20px;
			text-align: center;
			background-color: #002A80;
		}
		.img-group :active {
			background-color: #11B5AB;
		}
		.img-group img {
			width: 20px;
			height: 20px;
			margin-top: 5px;
		}
		.nav-tabs {
			margin-top: 10px;
		    border-bottom: 0px;
		}
		.nav-tabs li a {
		    border: none;
		    padding: 3px 10px;
		}
		.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
		    color: #555;
		    cursor: default;
		    background-color: #fff;
		    border-color: transparent;
		}
		.nav-tabs>li.active>a span.vein_icon1, .nav-tabs>li.active>a span.vein_icon1:focus, .nav-tabs>li.active>a span.vein_icon1:hover {
			background: url(../../img/myExtension/vein_icon1_pressed.png) no-repeat;
			width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li.active>a span.vein_icon2, .nav-tabs>li.active>a span.vein_icon2:focus, .nav-tabs>li.active>a span.vein_icon2:hover {
			background: url(../../img/myExtension/vein_icon2_pressed.png) no-repeat;
			width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li.active>a span.vein_icon3, .nav-tabs>li.active>a span.vein_icon3:focus, .nav-tabs>li.active>a span.vein_icon3:hover {
			background: url(../../img/myExtension/vein_icon3_pressed.png) no-repeat;
			width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li span.vein_icon1{
			display: inline-block;
            background: url(../../img/myExtension/vein_icon1_norm.png) no-repeat;
            width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li span.vein_icon1.active{
            background: url(../../img/myExtension/vein_icon1_pressed.png) no-repeat;
		}
		.nav-tabs>li span.vein_icon2{
			display: inline-block;
            background: url(../../img/myExtension/vein_icon2_norm.png) no-repeat;
            width: 20px;
            height: 20px;
            background-size: cover;
		}
		.nav-tabs>li span.vein_icon3{
			display: inline-block;
            background: url(../../img/myExtension/vein_icon3_norm.png) no-repeat;
            width: 20px;
            height: 20px;
            background-size: cover;
		}
		.tab-chart-pane {
			margin-bottom: 30px;
		}
		.tab-chart-content>.tab-chart-pane {
		    display: none;
		}
		.tab-chart-content>.active {
		    display: block;
		}
		/*----------层级表格-----------*/
		.search-div {
			margin-top: 10px;
		}
		.search-content {
		    display: inline-block;
		    width: 278px;
		    height: 32px;
		    background: url(../../img/myClients/search_input_bg.png);
		    background-size: 100% 100%;
		}
		.fade.in {
			margin-top: 15px;
		}
		.uiwm_tptitle_panel ol {
		    list-style: none;
		    width: 100%;
		    margin: 0;
		    display: block;
		    padding: 0;
		}
		.uiwm_tptitle_panel ol li {
		    width: 14%;
		    display: block;
		    padding: 7px;
		    float: left;
		    border-left: 1px solid #d6d6d6;
		    border-top: 1px solid #d6d6d6;
		    border-bottom: 1px solid #d6d6d6;
		}
		.uiwm_tptitle_panel ol li:first-child {
		    width: 22%;
		}
		.uiwm_tptitle_panel ol li:nth-child(2) {
		    width: 9%;
		    text-align: center;
		}
		.uiwm_tptitle_panel ol li:nth-child(3) {
		    width: 15%;
		    text-align: center;
		}
		.uiwm_tptitle_panel ol li:nth-child(4) {
		    width: 10%;
		    text-align: center;
		}
		.uiwm_tptitle_panel ol li:nth-child(5) {
		    width: 14%;
		    text-align: center;
		}
		.uiwm_tptitle_panel ol li:nth-child(6) {
		    width: 9%;
		    text-align: center;
		}
		.uiwm_tptitle_panel ol li:nth-child(7) {
		    border-right: 1px solid #d6d6d6;
		    width: 11%;
		    text-align: center;
		}
		.uiwm_tptitle_panel ol li:last-child {
		    border-right: 1px solid #d6d6d6;
		    width: 8%;
		    text-align: center;
		}
		#uiwm_tptable ul {
		    list-style: none;
		    width: 100%;
		    margin: 0;
		    display: block;
		    padding: 0;
		}
		#uiwm_tptable ul li {
		    width: 100%;
		    display: block;
		}
		#uiwm_tptable ul li span {
			display: block;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    height: 40px;
		    line-height: 40px;
		    float: left;
		    border-left: 1px solid #d6d6d6;
		    border-bottom: 1px solid #d6d6d6;
		}
		#uiwm_tptable ul li span button {
			color: #333;
		    background-color: #fff;
		    border-color: #ccc;
		}
		#uiwm_tptable ul li > span:first-child {
		    width: 22%;
		}
		#uiwm_tptable ul li > span:nth-child(2) {
		    width: 9%;
		    text-align: center;
		}
		#uiwm_tptable ul li > span:nth-child(3) {
		    width: 15%;
		    text-align: center;
		}
		#uiwm_tptable ul li > span:nth-child(4) {
		    width: 10%;
		    text-align: center;
		}
		#uiwm_tptable ul li > span:nth-child(5) {
		    width: 14%;
		    text-align: center;
		}
		#uiwm_tptable ul li > span:nth-child(6) {
		    width: 9%;
		    text-align: center;
		}
		#uiwm_tptable ul li > span:nth-child(7) {
		    border-right: 1px solid #d6d6d6;
		    width: 11%;
		    text-align: center;
		}
		#uiwm_tptable ul li > span:nth-child(8) {
		    border-right: 1px solid #d6d6d6;
		    width: 8%;
		    text-align: center;
		}
		.rotate90 {
		    -webkit-transform: rotate(90deg);
		    -ms-transform: rotate(90deg);
		    transform: rotate(90deg);
		}
		.text-xs {
		    font-size: 12px !important;
		}
		.glyphicon {
		    position: relative;
		    top: 1px;
		    display: inline-block;
		    font-family: 'Glyphicons Halflings';
		    font-style: normal;
		    font-weight: 400;
		    line-height: 1;
		    -webkit-font-smoothing: antialiased;
		    -moz-osx-font-smoothing: grayscale;
		}
		#uiwm_tptable ul li span::before {
		    content: '';
		    padding-left: 7px;
		}
		#uiwm_tptable > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 15px;
		}
		#uiwm_tptable > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 30px;
		}
		#uiwm_tptable > ul > li > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 45px;
		}
		#uiwm_tptable > ul > li > ul > li > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 60px;
		}
		#uiwm_tptable > ul > li > ul > li > ul > li > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 75px;
		}
		#uiwm_tptable > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 90px;
		}
		#uiwm_tptable > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 105px;
		}
		#uiwm_tptable > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 120px;
		}
		#uiwm_tptable > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 135px;
		}
		#uiwm_tptable > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > span:first-child::before {
		  content: '';
		  padding-left: 150px;
		}
		/*----------层级表格-----------*/
	</style>
</head>
<body>
	<div class="content">
		<div class="article-title">
			<div class="title"></div>
			<div class="share-num">
				<img src="../../img/myExtension/content-read.png" /><span></span><img src="../../img/myExtension/content-share.png" /><span></span>
			</div>
		</div>
		<div class="btn-group btn-group-justified btn-tab" role="group" aria-label="button-group">
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel1" class="btn btn-default active">发展足迹</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel2" class="btn btn-default">客户成功指数</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel3" class="btn btn-default">转发客户</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel4" class="btn btn-default">潜在客户</button>
			</div>
		</div>
		<div class="tab-content">
			<div id="tab-panel1" class="tab-pane active">
				<ul id="myTab" class="nav nav-tabs" role="tablist">
					<li class="active" panel-data="tab-li2"><a href="#rule"  title="结构图" role="tab" data-toggle="tab"><span class="vein_icon2"></span></a></li>
				    <li panel-data="tab-li1"><a href="#bulletin" title="列表图" role="tab" data-toggle="tab"><span class="vein_icon1"></span></a></li>
				    <li panel-data="tab-li3"><a href="#hierarchy" role="tab" data-toggle="tab"><span class="vein_icon3"></span></a></li>
				</ul>
				<!-- 选项卡面板 -->
				<div id="myTabContent" class="tab-chart-content">
				    <div class="tab-chart-pane" id="bulletin">
				    		<div id="uiwm-threadview" style="height:680px;"></div>
				    </div>
				    <div class="tab-chart-pane active" id="rule">
				    		<iframe src="" width="100%" height="680px" frameborder="0" scrolling="no"></iframe>
				    </div>
				    <div class="tab-chart-pane" id="hierarchy">
				    		<div class="search-div">
                            <label>微信昵称：</label>
							<div class="search-content">
								<input type="search" id="searchInput" class="form-control" placeholder="请输入微信昵称">
							</div>
                        </div>
					    	<div role="tabpanel" class="tab-pane fade active in" id="settings">
                            <div class="uiwm_tptitle_panel">
                                <ol class="clearfix">
                                    <li>昵称</li>
                                    <li>所在层级</li>
                                    <li><!--下级层数 ／ -->下级人数</li>
                                    <li>阅读次数</li>
                                    <li>阅读时间</li>
                                    <li>性别</li>
                                    <li>地址</li>
                                    <li>操作</li>
                                </ol>
                            </div>
                            <div id="uiwm_tptable" style="display: block;">
	                            	<!--<ul class="clearfix">
							        <li data-level="1" data-id="2443335" class="clearfix">
							            <span class="c-p"><i class="glyphicon glyphicon-play text-xs"></i>张远江</span>
							            <span>1</span>
							            <span><small class="uiwm_lowerlevel">3</small> ／ 47</span>
							            <span>2</span>
							            <span>2018-06-27 15:31</span>
							            <span>男</span>
							            <span> </span>
							        </li>
								</ul>-->
                            </div>
                        </div>
				    </div>
				</div>
			</div>
			<div id="tab-panel2" class="tab-pane">
				<table class="table table-bordered table-hover table-striped">
					<thead>
						<tr>
							<th>序号</th>
							<th>头像</th>
							<th>昵称</th>
							<th>性别</th>
							<th>地区</th>
							<th>成功指数</th>
							<th>阅读次数</th>
							<th>是否点赞</th>
							<th>阅读时长</th>
							<th>客户详情</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<nav id="page2" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
			<div id="tab-panel3" class="tab-pane">
		  		<table class="table table-bordered table-hover table-striped">
					<thead>
						<tr>
							<th>序号</th>
							<th>头像</th>
							<th>昵称</th>
							<th>性别</th>
							<th>地区</th>
							<th>成功指数</th>
							<th>层级</th>
							<th>转发朋友/群</th>
							<th>转发朋友圈</th>
							<th>阅读人数（一层）</th>
							<th>阅读次数</th>
							<th>客户详情</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<nav id="page3" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
			<div id="tab-panel4" class="tab-pane">
		  		<table class="table table-bordered table-hover table-striped">
					<thead>
						<tr>
							<th>序号</th>
							<th>头像</th>
							<th>昵称</th>
							<th>性别</th>
							<th>地区</th>
							<th>层级</th>
							<th>转发朋友/群</th>
							<th>转发朋友圈</th>
							<th>阅读次数</th>
							<th>每次阅读时长</th>
							<th>是否报名</th>
							<th>是否加微信</th>
							<th>打电话<br />（次数）</th>
							<th>是否下单</th>
							<th>是否支付</th>
							<th>客户详情</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<nav id="page4" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
		</div>
		
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/page2.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../../js/utils/template.js" ></script>
	<script type="text/javascript" src="../../js/utils/echarts.min.js" ></script>
	<script type="text/tmpl" id="tree_tmpl">
        <ul class="clearfix">
        {{each list as v i}}
        <li data-level="{{v.level}}" data-id="{{v.customerId}}" class="clearfix">
            <span {{if v.isLowerLevel > 0}} class="c-p" {{/if}}>{{if v.isLowerLevel > 0}}<i class="glyphicon glyphicon-play text-xs"></i>{{/if}}{{v.nickName}}</span>
            <span>{{v.level}}</span>
            <span><!--<small class="uiwm_lowerlevel">{{v.isLowerLevel}}</small> ／ -->{{v.lowerRead}}</span>
            <span>{{v.readNum}}</span>
            <span>{{v.readTime}}</span>
            <span>{{v.sex==1?'男':v.sex==2?'女':'未知'}}</span>
            <span>{{v.area}}</span>
            <span class="detail-info"><button class="btn">客户详细</button></span>
        </li>
        {{/each}}
        </ul>
    </script>
	<script>
		var userID,companyID,articleID,relationType,tempNickName,articleUserID;
		var panels = {pane1:0,pane2:0,pane3:0,pane4:0};
		var worldMapContainer = document.getElementById('uiwm-threadview');
		//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
	    var resizeWorldMapContainer = function () {
	        worldMapContainer.style.width = window.innerWidth + 'px';
	        worldMapContainer.style.height = window.innerHeight + 'px';
	    };
	    //设置容器高宽
	    resizeWorldMapContainer();
	    var myChart = echarts.init(worldMapContainer);
		myChart.showLoading();
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			articleID = base.getParameter("articleID");
			relationType = base.getParameter("relationType");
			articleUserID = base.getParameter("articleUserID");
			if (articleUserID != null && articleUserID != "") {
				userID = articleUserID;
			}
			$("#rule").find("iframe").attr("src", "connChartIframe.html?articleID="+articleID+"&relationType="+relationType+"&articleUserID="+articleUserID);
			//获取脉络图信息
			base.postData(base.url.relationMap, {userID:userID,companyID:companyID,articleID:articleID,relationType:relationType}, callbackRelationMap);
			//获取文章信息
			base.postData(base.url.articleDataInfo, {userID:userID,companyID:companyID,articleID:articleID}, callbackArticleInfo);
		});
		function callbackRelationMap(data) {
			if (data.success) {
				var graph = data.context.dataPacket;
				myChart.hideLoading();
			    var categories = [];
			    var max = 0;
			    graph.nodes.forEach(function (node) {
			        node.itemStyle = null;
			        node.symbolSize = node.size;
			        node.value = node.symbolSize;
			        node.category = node.category;
			        // Use random x, y
			        node.x = node.y = null;
			        node.draggable = true;
			        if(node.category>max){
	                    max = node.category;
	                }
			    });
			    for (var i = 0; i <= max; i++) {
	                categories[i] = {
	                    name: '层级' + i
	                };
	            }
			    
			    option = {
			    	color: ['#000033','#6991e9','#fff33f','#de4e93','#24ddcf','#ff9611','#19d535','#d7003f','#1774ff','#8236f','#0090e6','#ccff0','#9578ff','#18ce7f'],
			        title: {
			            text: '脉络图',
			            subtext: 'Default layout',
			            top: 'bottom',
			            left: 'right'
			        },
			        tooltip: {
			        	formatter: function (params) {
	                    if (params.dataType === 'node') {
	                      var colorEl = '<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:' + params.color + '"></span>';
	                      return colorEl + params.name;
	                    }
	                  }
			        },
			        legend: [{
			            // selectedMode: 'single',
			            data: categories.map(function (a) {
			                return a.name;
			            })
			        }],
			        animation: false,
			        series : [
			            {
			                name: '未来脉络',
			                type: 'graph',
			                layout: 'force',
			                data: graph.nodes,
			                links: graph.links,
			                legendHoverLink: true,
	                        focusNodeAdjacency: true,
			                categories: categories,
			                roam: true,
			                label: {
			                    normal: {
			                        position: 'right'
			                    }
			                },
			                force: {
			                    repulsion: 200
			                },
			                lineStyle: {
		                        normal: {
		                            color: 'source',
		                            curveness: 0.3
		                        }
		                    }
			            }
			        ]
			    };
			    myChart.setOption(option);
			    myChart.on('click', function (params) {
				    var _customerID = params.data.id;
					window.parent.location = "../index.html?path=myClient/clientDetails.html?customerID="+_customerID;
				});
			}
		}
		function callbackArticleInfo(data) {
			if (data.success) {
				$(".article-title .title").text(data.context.articleTitle);
				$(".article-title .share-num").html('<img src="../../img/myExtension/content-read.png" /><span>'+data.context.articleReadNum+'</span><img src="../../img/myExtension/content-share.png" /><span>'+data.context.articleShareNum+'</span>');
			}
		}
		
		$(".btn-tab").on("click", "button", function(){
			$(".btn-tab button").removeClass("active");
			$(this).addClass("active");
			var panelId = $(this).attr("panel-data");
			$(".tab-content .tab-pane").removeClass("active");
			$("#"+panelId).addClass("active");
			if (panelId == "tab-panel2") {//客户详情
				if (panels.pane2 == 0) {
					initGetCustomerImpact(1);
				}
			}else if (panelId == "tab-panel3") {//转发客户
				if (panels.pane3 == 0) {
					initGetShareCustomer(1);
				}
			}else if (panelId == "tab-panel4") {//潜在客户
				if (panels.pane4 == 0) {
					initGetDiamondCustomers(1);
				}
			}
		});
		//获取客户影响力
		function initGetCustomerImpact(page) {
			var data = {
				userID:userID,
				companyID:companyID,
				articleID:articleID,
				pageNo:page
			}
			base.postData(base.url.getCustomerImpact,data, callbackGetCustomerImpact);
		}
		function callbackGetCustomerImpact(data) {
			if (data.success) {
				var html = "";
				for (var i=0; i < data.context.clientImpactList.length; i++) {
					html += pingCustomerImpact(data.context.clientImpactList[i], i+1);
				}
				$("#tab-panel2 table tbody").html(html);
				if (panels.pane2 == 0) {
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/10);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage//总页数
					};
					$("#page2").initPage(page, callbackpage2);
					
				}
			}
		}
		function callbackpage2(page) {
			if (panels.pane2 == 0) {
				panels.pane2 = 1;
			}else{
				initGetCustomerImpact(page.currentPage);	
			}
		}
		function pingCustomerImpact(data, i) {
			var sex = "未知";
			if (data.sex == 1) {
				sex = "男";
			}else if (data.sex == 2) {
				sex = "女";
			}
//			var readTime = data.readTime + "-" + (data.readTime + 10) + "秒";
			var readTime = "";
			if (data.readTime < 60) {
				readTime = data.readTime + "-" + (data.readTime + 10) + "秒";
			}else{
				readTime = parseInt(data.readTime/60);
				if (readTime < 2) {
					readTime = "1-2分钟";
				}else if (readTime < 5) {
					readTime = "2-5分钟";
				}else if (readTime >= 5) {
					readTime = "5分钟以上";
				}
			}
			var html = '<tr>'+
						'	<td>'+i+'</td>'+
						'	<td><img class="border-radius-30" src="'+data.headImgUrl+'" /></td>'+
						'	<td>'+data.nickName+'</td>'+
						'	<td>'+sex+'</td>'+
						'	<td>'+data.area+'</td>'+
						'	<td>'+data.impactPoints+'</td>'+
						'	<td>'+data.readNum+'</td>'+
						'	<td>'+(data.isLike == 1?"是":"否")+'</td>'+
						'	<td>'+readTime+'</td>'+
						'	<td><input type="hidden" name="customerID" value="'+data.customerID+'" /><button class="btn btn-default">详情</button></td>'+
						'</tr>';
			return html;			
		}
		
		function initGetShareCustomer(page) {
			var data = {
				userID:userID,
				companyID:companyID,
				articleID:articleID,
				pageNo:page
			}
			base.postData(base.url.getShareCustomer,data, callbackGetShareCustomer);
		}
		function callbackGetShareCustomer(data) {
			if (data.success) {
				var html = "";
				for (var i=0; i<data.context.clientImpactList.length; i++) {
					html += pingGetShareCustomer(data.context.clientImpactList[i], i+1);
				}
				$("#tab-panel3 table tbody").html(html);
				if (panels.pane3 == 0) {
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/10);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage//总页数
					};
					$("#page3").initPage(page, callbackpage3);
				}
			}
		}
		function callbackpage3(page) {
			if (panels.pane3 == 0) {
				panels.pane3 = 1;
			}else{
				initGetShareCustomer(page.currentPage);	
			}
		}
		function pingGetShareCustomer(data, i) {
			var sex = "未知";
			if (data.sex == 1) {
				sex = "男";
			}else if (data.sex == 2) {
				sex = "女";
			}
			var html = '<tr>'+
						'	<td>'+i+'</td>'+
						'	<td><img class="border-radius-30" src="'+data.headImgUrl+'" /></td>'+
						'	<td>'+data.nickName+'</td>'+
						'	<td>'+sex+'</td>'+
						'	<td>'+data.area+'</td>'+
						'	<td>'+data.impactPoints+'</td>'+
						'	<td>'+data.level+'</td>'+
						'	<td>'+data.shareFriendNum+'</td>'+
						'	<td>'+data.shareFriendCircleNum+'</td>'+
						'	<td>'+data.totalReadPeople+'</td>'+
						'	<td>'+data.totalReadNum+'</td>'+
						'	<td><input type="hidden" name="customerID" value="'+data.customerID+'" /><button class="btn btn-default">详情</button></td>'+
						'</tr>';
			return html;			
		}
		function initGetDiamondCustomers(page){
			var data = {
				userID:userID,
				companyID:companyID,
				articleID:articleID,
				pageNo:page
			}
			base.postData(base.url.getDiamondCustomers,data, callbackGetDiamondCustomers);
		}
		function callbackGetDiamondCustomers(data) {
			if (data.success) {
				var html = "";
				for (var i=0; i<data.context.diamondCustomersList.length; i++) {
					html += pingGetDiamondCustomers(data.context.diamondCustomersList[i], i+1);
				}
				$("#tab-panel4 table tbody").html(html);
				if (panels.pane4 == 0) {
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/10);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage//总页数
					};
					$("#page4").initPage(page, callbackpage4);
				}
			}
		}
		function callbackpage4(page, i) {
			if (panels.pane4 == 0) {
				panels.pane4 = 1;
			}else{
				initGetDiamondCustomers(page.currentPage);	
			}
		}
		function pingGetDiamondCustomers(data,i) {
			var sex = "未知";
			if (data.sex == 1) {
				sex = "男";
			}else if (data.sex == 2) {
				sex = "女";
			}
			var readTime = "";
			for (var j=0; j<data.readTimeList.length; j++) {
				readTime += (j+1)+"/"+data.readTimeList[j]+"-"+(data.readTimeList[j]+10)+"s ";
			}
			var readTime = "";
			for (var j=0; j<data.readTimeList.length; j++) {
				var time = "";
				if (data.readTimeList[j] < 60) {
					time = data.readTimeList[j] + "-" + (data.readTimeList[j] + 10) + "秒 ";
				}else{
					time = parseInt(data.readTimeList[j]/60);
					if (time < 2) {
						time = "1-2分钟 ";
					}else if (time < 5) {
						time = "2-5分钟 ";
					}else if (time >= 5) {
						time = "5分钟以上 ";
					}
				}
				readTime += (j+1)+"/"+time;
			}
			var html = '<tr>'+
						'	<td>'+i+'</td>'+
						'	<td><img class="border-radius-30" src="'+data.headImgUrl+'" /></td>'+
						'	<td>'+data.nickName+'</td>'+
						'	<td>'+sex+'</td>'+
						'	<td>'+data.area+'</td>'+
						'	<td>'+data.level+'</td>'+
						'	<td>'+data.shareFriendNum+'</td>'+
						'	<td>'+data.shareFriendCircleNum+'</td>'+
						'	<td>'+data.readNum+'</td>'+
						'	<td>'+readTime+'</td>'+
						'	<td>'+(data.isEnroll == 1?"是":"否")+'</td>'+
						'	<td>'+(data.isJoinWX == 1?"是":"否")+'</td>'+
						'	<td>'+data.callNum+'</td>'+
						'	<td>'+(data.isBuy == 1?"是":"否")+'</td>'+
						'	<td>'+(data.isTrade == 1?"是":"否")+'</td>'+
						'	<td><input type="hidden" name="customerID" value="'+data.customerID+'" /><button class="btn btn-default">详情</button></td>'+
						'</tr>';
			return html;			
		}
		$('div[id^="tab-panel"]').on("click", ".btn-default", function(){
			var _customerID = $(this).parent().find("input[name='customerID']").val();
			window.parent.location = "../index.html?path=myClient/clientDetails.html?customerID="+_customerID;
		});
		$("#myTab").on("click", "li", function(){
			var panelId = $(this).attr("panel-data");
			if (panelId == "tab-li1") {
//				$("#rule").find("iframe").attr("src", "connChartIframe.html?articleID="+articleID+"&relationType="+relationType+"&articleUserID="+articleUserID);
//				$("#rule").append('<iframe width="100%" height="680px" frameborder="0" scrolling="no" src="connChartIframe.html?articleID='+articleID+'"></iframe>');
			} else if (panelId == "tab-li3") {
				getHierarchyCustomerInfo();
			}
		});
		//搜索
		$('#searchInput').bind('keyup', function(event) {
			if (event.keyCode == "13") {
		　　　　//回车执行查询
				$(this).blur();
				tempNickName = $(this).val();
				getHierarchyCustomerInfo();
		　　	}
		});
		function getHierarchyCustomerInfo() {
			var params = {
				userID:userID,
				companyID:companyID,
				articleID:articleID,
				nickName:tempNickName
			}
			base.postData(base.url.hierarchyCustomerInfo, params, function(data) {
				if(data.success) {
                    var html = template('tree_tmpl',{list:data.context.hierarchyWmCustomerList});
                    $('#uiwm_tptable').empty().html(html);
                }
			});
		}
        $('#uiwm_tptable').on('click','li',function(e){
            e.stopPropagation();
            var $this = $(this);

            var level = $this.data('level');
            var customerID = $this.data('id');
            if($this.find("i").eq(0).hasClass("rotate90")){
              $this.find('ul').remove();
            } else {
                	var params = {
					userID:userID,
					companyID:companyID,
					articleID:articleID,
					customerID: customerID,
					level: level++
				}
                	base.postData(base.url.hierarchyCustomerInfo, params, function(data) {
					if(data.success) {
	                    var html = template('tree_tmpl',{list:data.context.hierarchyWmCustomerList});
	                    $this.find('ul').remove();
                      	$this.append(html);
	                }
				});
            }
            $this.find("i").toggleClass("rotate90")
        });
        $('#uiwm_tptable').on('click','.detail-info',function(e){
            e.stopPropagation();
            var _customerID = $(this).parent().data('id');
            window.parent.location = "../index.html?path=myClient/clientDetails.html?customerID="+_customerID;
        });
	</script>
</body>
</html>
